	<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>记账了</title>
<link rel="stylesheet" href="resources/css/style.css" type="text/css"
	media="all" />
<link href="resources/css/demo.css" type="text/css" rel="stylesheet" />
<link href="resources/css/custom.css" rel="stylesheet" />
<script src="resources/js/jquery-1.10.2.js"></script>
<script src="resources/js/jquery-ui-1.10.4.custom.js"></script>

<script type="text/javascript">
function altRows(id){
    if(document.getElementsByTagName){  
        
        var table = document.getElementById(id);  
        var rows = table.getElementsByTagName("tr"); 
         
        for(i = 0; i < rows.length; i++){          
            if(i % 2 == 0){
                rows[i].className = "evenrowcolor";
            }else{
                rows[i].className = "oddrowcolor";
            }      
        }
    }
}

window.onload=function(){
    altRows('alternatecolor');
}
$(document).ready(function(){
	$("[href='#del']").click(function() {
		if(confirm("确定要删除该用户吗？"))
		{
			var url = "/deleteMember?member="+$(this).attr("name");
			window.location.href=url;
		}
	});
});
</script>
<style>
body {
	font-size: 62.5%;
}

label,input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td,div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-dialog .ui-state-error {
	padding: .3em;
}

.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}

.action {
	padding-left: 450px;
}

.p1 {
	color: red
}

.c1 {
	color: black;
	font-size: 20px;
	line-height: 2.5em;
	padding-left: 300px;
	width: 150px;
}

.c2 {
	color: black;
	font-size: 20px;
	line-height: 2.5em;
}

.a1 {
	color: black;
	font-size: 25px;
	line-height: 2.5em;
	cursor: pointer;
	background-color: #EEEEEE;
}

.bton {
	color: block;
	font-size: 15px;
	margin-top: 20px;
	margin-left: 450px;
	cursor: pointer;
	background-color: #99AAff;
}

table.altrowstable {
	font-family: verdana, arial, sans-serif;
	font-size: 13px;
	color: #333333;
	border-width: 1px;
	border-color: #a9c6c9;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}

table.altrowstable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.altrowstable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

.oddrowcolor {
	background-color: #d4e3e5;
}

.evenrowcolor {
	background-color: #c3dde0;
}
</style>
</head>
<body>
	<div id="dialog-form" title="创建新的用户">
		<p class="validateTips">请输入新的用户名</p>

		<form action="createMember" id="sou" method="post">
			<fieldset>
				<label for="member">用户名</label>
				<input type="text" name="member" id="member"
					class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</form>
	</div>
	<div class="main">
		<div class="wraper">
			<h2 align="left">
				<span class="green">&nbsp;&nbsp;家庭成员信息</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="c1">&nbsp;&nbsp;&nbsp;&nbsp; <img width="16"
					height="16" src="resources/images/tab/22.gif"> <a
					href="javascript:void(0)" id="createMember">添加用户</a>
				</span>
			</h2>

			<table class="altrowstable" id="alternatecolor">
				<tr>
					<th>用户姓名</th>
					<th>编辑操作</th>
				</tr>
				<c:forEach items="${memberList }" var="member">
					<tr>
						<td>${member }</td>
						<td width="30%"><span class="STYLE4">&nbsp;&nbsp;&nbsp;&nbsp;
								<img width="16" height="16" src="resources/images/tab/del.gif">
								<a href="#del" name="${member}">删除</a>
						</span></td>
					</tr>
				</c:forEach>
			</table>
			<h2>
				<br />
			</h2>
			<div class="tipmsg">
				<p>
					<br />
				</p>
				<p>
					<br />
				</p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
$(function() {
	var member = $( "#member" ),
		allFields = $( [] ).add( member ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips.text( t ).addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {return true;}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {return true;}
	}

	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 250,
		width: 250,
		modal: true,
		buttons: {
			Save: function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );
				bValid = bValid && checkLength( member, "member", 2, 8 );
				bValid = bValid && checkRegexp( member, /^[\u4e00-\u9fa5_A-Za-z]+$/, "member field only allow :Letter and chinese" );
				if ( bValid ) {
					$("#sou").submit();
					$( this ).dialog( "close" );
			}},
			Cancel: function() {
				$( this ).dialog( "close" );
		}},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

	$( "#createMember" ).click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
});
</script>
</html>
